<template>
  <!--      <router-link to="/zone">zone</router-link>-->
  <div class="container">
    <br>
    <br>
    <br>
    <div class="login-wrapper">

      <div class="head">管理员登录</div>

      <!--    表单填写区-->
      <div class="form-wrapper">
        <form action="/login">
          <el-icon class="user-icon"><User />
          </el-icon> <input type="text" id="username" name="username"  v-model="username" placeholder="  admin" class="input-item">
          <p id="p1" style="display: none">登录规则1</p>
          <el-icon class="password-icon"><Lock /></el-icon>
          <input type="password" id="password" name="password" placeholder="password" class="input-item">
          <p  id="p2" style="display: none">登录规则1</p>
        </form>

        <div class="btn" @click="check()">登录</div>


      </div>
<!--      <div class="msg">
        Don't have account?
        <router-link to="/register">sign up</router-link>

      </div>-->
      <br>
      <br>
      <br>
      <br>

      <div>
        <router-link to="/Login"  style="text-decoration: none;color: #a6c1ee">用户登录</router-link>
      </div>
    </div>

    <br>
    <br>
    <br>
  </div>
</template>

<script>
import axios from "axios";
import Avatar from "@/components/AvatarComponent";
import AvatarComponent from "@/components/AvatarComponent";
import {ElMessage} from "element-plus";

export default {
  name:"LoginView",
  data(){
    return{
      username: ''
    }
  },
  methods:{
    check(){
      var username= document.getElementById("username").value
      var password=document.getElementById("password").value

      if(username==""){
        document.getElementById("p1").style.display="inline"
        document.getElementById("p1").innerHTML="用户名不能为空"
      }else {
        document.getElementById("p1").style.display="none"
      }
      if(password==""){
        document.getElementById("p2").style.display="inline"
        document.getElementById("p2").innerHTML="密码不能为空"
      }else {
        document.getElementById("p2").style.display="none"
      }
      if(username !=""&& password!=""){
        this.login();
        // this.$router.push({path: '/zone',name:'zone', query: {selected: "2"}});
      }

    },

    login(){
      var username= document.getElementById("username").value
      var password=document.getElementById("password").value
      const  _this=this

      //axios传值给后端
      axios({
        method: 'post',
        url: 'http://localhost:8081/manageLogin',
        params: {
          managerAdmin:username,
          managerPassword:password
        }
      })
          .then(function (response) {
            console.log(response); // 前台调试能够看到获取到数据了
            // alert(response.data)
            if(response.data=="success"){
              alert("管理员登录成功")
              //登录成功，跳转到zone页面，带入参数
             _this.$router.push("/ManagerView");

            }else{
              ElMessage({
                message:"账户或密码错误，登录失败",
                type:'error'
              })
            }
          })
          .catch(function (error) {
            console.log(error);
          });

    }
  }

}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
}
body {
  height: 100%;
}
.container {
  height: 100%;
  background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
}
.login-wrapper {
  background-color: #fff;
  width: 358px;
  height: 588px;
  border-radius: 15px;
  padding: 0 50px;
  position: relative;
  left:50%;
  top:300px;
  transform: translate(-50%, -50%);

}
.avatar{
  /*margin-top: 100px;*/
  position: relative;
  animation: failling 2s linear;
}
@keyframes falling {
  0% {
    top: 0px;
  }

  100% {
    top: 100px;
  }
}
.header {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  line-height: 200px;
  color: #a6c1ee;
  font-family: Algerian;
}

img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.form-wrapper{
  margin-top: 50px;

}
.input-item {
  display: block;
  width: 100%;
  margin-bottom: 20px;
  border: 0;
  padding: 10px;
  border-bottom: 1px solid rgb(128, 125, 125);
  font-size: 15px;
  outline: none;

}

.input-item:placeholder {
  text-transform: uppercase;
}
.btn {
  text-align: center;
  padding: 10px;
  width: 100%;
  margin-top: 40px;
  background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
  color: #fff;
}
.msg {
  text-align: center;
  line-height: 88px;
}
.a {
  text-decoration-line: none;
  color: #abc1ee;
}
.user-icon{
  /*相对定位*/
  position: fixed;
  left: 40px;
  top: 264px;
}
.password-icon{
  /*相对定位*/
  position: fixed;
  left: 40px;
  top: 324px;
}
.head{
  font-size: 38px;
  font-weight: bold;
  text-align: center;
  line-height: 200px;
  color: #a6c1ee;
}
</style>
